<template>
  <div class="publish-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>发布信息</span>
        </div>
      </template>

      <el-form :model="form" :rules="rules" ref="formRef" label-width="120px">
        <el-form-item label="信息类型" prop="type">
          <el-radio-group v-model="form.type">
            <el-radio :label="0">失物登记</el-radio>
            <el-radio :label="1">招领发布</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="物品名称" prop="itemName">
          <el-input v-model="form.itemName" placeholder="请输入物品名称" />
        </el-form-item>

        <el-form-item label="物品类别" prop="category">
          <el-select v-model="form.category" placeholder="请选择物品类别">
            <el-option v-for="(name, index) in categoryNames" :key="index" :label="name" :value="index" />
          </el-select>
        </el-form-item>
        <el-form-item label="物品特征" prop="description">
          <el-input 
            v-model="form.description" 
            type="textarea" 
            :rows="4"
            placeholder="请详细描述物品特征，如颜色、品牌、型号等（至少0字）"
            maxlength="500"
            show-word-limit
          />
        </el-form-item>

        <el-form-item :label="form.type === 0 ? '丢失日期' : '拾到日期'" prop="lostDate">
          <el-date-picker 
            v-model="form.lostDate" 
            type="date" 
            placeholder="选择日期"
            :disabled-date="disabledDate"
          />
        </el-form-item>

        <el-form-item :label="form.type === 0 ? '丢失时段' : '拾到时段'" prop="lostTime">
          <el-select v-model="form.lostTime" placeholder="请选择时段">
            <el-option label="早上(06:00-12:00)" value="早上(06:00-12:00)" />
            <el-option label="下午(12:00-18:00)" value="下午(12:00-18:00)" />
            <el-option label="晚上(18:00-24:00)" value="晚上(18:00-24:00)" />
          </el-select>
        </el-form-item>

        <el-form-item label="校园区域" prop="locationArea">
          <el-select v-model="form.locationArea" placeholder="请选择校园区域">
            <el-option v-for="area in areaList" :key="area" :label="area" :value="area" />
          </el-select>
        </el-form-item>

        <el-form-item label="具体位置" prop="locationDetail">
          <el-input v-model="form.locationDetail" placeholder="请输入具体位置" />
        </el-form-item>

        <el-form-item label="联系方式" prop="contactPhone">
          <el-input v-model="form.contactPhone" placeholder="请输入联系电话" />
        </el-form-item>

        <el-form-item label="备用联系方式">
          <el-input v-model="form.contactBackup" placeholder="请输入QQ/微信（选填）" />
        </el-form-item>

        <el-form-item v-if="form.type === 1" label="物品存放地点">
          <el-input v-model="form.storageLocation" placeholder="请输入物品存放地点（选填）" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleSubmit" :loading="loading">提交</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { publishInfo } from '@/api/item'

const router = useRouter()
const formRef = ref(null)
const loading = ref(false)

const categoryNames = ['电子设备', '证件卡类', '学习用品', '生活用品', '衣物鞋帽', '其他']
const areaList = ['教学楼', '图书馆', '食堂', '宿舍区', '操场', '其他']

const form = reactive({
  type: 0,
  itemName: '',
  category: null,
  description: '',
  lostDate: '',
  lostTime: '',
  locationArea: '',
  locationDetail: '',
  contactPhone: '',
  contactBackup: '',
  storageLocation: ''
})

const rules = {
  type: [{ required: true, message: '请选择信息类型', trigger: 'change' }],
  itemName: [{ required: true, message: '请输入物品名称', trigger: 'blur' }],
  category: [{ required: true, message: '请选择物品类别', trigger: 'change' }],
  description: [
    { required: true, message: '请输入物品特征', trigger: 'blur' },
    { min: 0, message: '至少输入0个字符', trigger: 'blur' }
  ],
  lostDate: [{ required: true, message: '请选择日期', trigger: 'change' }],
  lostTime: [{ required: true, message: '请选择时段', trigger: 'change' }],
  locationArea: [{ required: true, message: '请选择校园区域', trigger: 'change' }],
  locationDetail: [{ required: true, message: '请输入具体位置', trigger: 'blur' }],
  contactPhone: [
    { required: true, message: '请输入联系电话', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ]
}

const disabledDate = (time) => {
  return time.getTime() > Date.now()
}

const handleSubmit = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      loading.value = true
      try {
        await publishInfo(form)
        ElMessage.success('发布成功，等待审核')
        router.push('/my-publish')
      } catch (error) {
        console.error(error)
      } finally {
        loading.value = false
      }
    }
  })
}

const handleReset = () => {
  formRef.value.resetFields()
}
</script>

<style scoped>
.publish-container {
  max-width: 800px;
  margin: 0 auto;
}

.card-header {
  font-size: 18px;
  font-weight: bold;
}
</style>

